<template>
  <div class="asset-detail">
    <section class="page-back">
      <router-link to="/assetManage">资产管理</router-link>
      <span>
        <i>></i>资产详情
      </span>
    </section>
    <section class="asset-base-info">
      <div class="asset-title clear">
        <span class="fl">基本信息</span>
        <span class="fr">
          <el-button type="text" @click="exportQrCode">下载资产二维码</el-button>
          <i class="el-icon-arrow-left" @click="changeAsset(-1)"></i>
          <i class="el-icon-arrow-right" @click="changeAsset(1)"></i>
        </span>
      </div>
      <div class="top-box-content">
        <div>
          <el-image
            style="width: 100%; height: 100%"
            :src="BASE_URL + assetInfoData.thumb"
            :preview-src-list="assetPicData"
          >
            <div slot="error" class="image-slot">
              <img
                src="../../../assets/images/assetManage/placeholder.png"
                style="width: 100%; height: 100%"
              />
            </div>
          </el-image>
        </div>
        <div>
          <div class="top-box-right">
            <div>
              <div class="list-item">
                <div>
                  <span class="name-title">资产编号：</span>
                  <span>{{assetInfoData.identifier}}</span>
                </div>
                <div>
                  <span class="name-title">存放点：</span>
                  <span>{{assetInfoData.place}}</span>
                </div>
              </div>
              <div class="list-item">
                <div>
                  <span class="name-title">资产名称：</span>
                  <span :title="assetInfoData.name">{{assetInfoData.name}}</span>
                </div>
                <div>
                  <span class="name-title">归属：</span>
                  <span>{{assetInfoData.owner}}</span>
                </div>
              </div>
              <div class="list-item">
                <div>
                  <span class="name-title">购买时间：</span>
                  <span>{{assetInfoData.buy_time}}</span>
                </div>
                <div>
                  <span class="name-title">保管人：</span>
                  <span>{{assetInfoData.manager}}</span>
                </div>
              </div>
              <div class="list-item">
                <div>
                  <span class="name-title">分类：</span>
                  <span>{{assetInfoData.type_name}}</span>
                </div>
                <div>
                  <span class="name-title">保管人联系方式：</span>
                  <span>{{assetInfoData.mobile}}</span>
                </div>
              </div>
              <div class="list-item">
                <div>
                  <span class="name-title">信息（品牌/型号）：</span>
                  <span>{{assetInfoData.brand}}</span>
                </div>
                <div>
                  <span class="name-title">单位：</span>
                  <span>{{assetInfoData.unit}}</span>
                </div>
              </div>
              <div class="list-item">
                <div>
                  <span class="name-title">数量：</span>
                  <span>{{assetInfoData.number}}</span>
                </div>
                <div>
                  <span class="name-title">单位价格（元）：</span>
                  <span>{{assetInfoData.price}}</span>
                </div>
              </div>
              <div class="list-item">
                <span class="name-title">总购入价格（元）：</span>
                <span>{{assetInfoData.total_price}}</span>
              </div>
              <div class="list-item">
                <span class="name-title">备注：</span>
                <span class="remarks" :title="assetInfoData.comment">{{assetInfoData.comment}}</span>
              </div>
              <div class="list-item">
                <span class="name-title">资产状态：</span>
                <div class="content-state">
                  <span>使用中（{{getAssetState(2)}}）</span>|
                  <span>未使用（{{getAssetState(1)}}）</span>|
                  <span>损坏（{{getAssetState(3)}}）</span>|
                  <span>丢失（{{getAssetState(4)}}）</span>|
                  <span class="last-span">报废（{{getAssetState(5)}}）</span>
                </div>
              </div>
            </div>
          </div>
          <div class="top-box-bottom">
            <div>
              <span class="name-title">最后编辑人：</span>
              <span>{{assetInfoData.update_name}}</span>
            </div>
            <div>
              <span class="name-title">最后编辑时间：</span>
              <span>{{assetInfoData.update_time}}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="asset-record">
      <!-- 领用记录 -->
      <div>
        <div class="table-box-title">
          <span>
            <img src="../../../assets/images/assetManage/receive_icon.png" />领用记录
          </span>
        </div>
        <div
          class="zh-table-contents"
          v-loading="receiveLoading.status"
          :element-loading-text="receiveLoading.txt"
        >
          <el-table :data="receiveData" border fixed max-height="600" center style="width: 100%">
            <el-table-column
              type="index"
              :index="receiveTypeIndex"
              label="序号"
              show-overflow-tooltip
              width="30"
            ></el-table-column>
            <el-table-column prop="day_time" label="领用时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="num" label="领用数" show-overflow-tooltip width="46"></el-table-column>
            <el-table-column prop="user_name" label="领用人" show-overflow-tooltip width="56"></el-table-column>
            <el-table-column prop="department" label="领用部门" show-overflow-tooltip width="56"></el-table-column>
            <el-table-column prop label="备注" show-overflow-tooltip width="28">
              <template slot-scope="scope">
                <span class="check-row" v-if="scope.row.comment" @click="checkRemark(scope.row)">查看</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination" v-show="receiveParam.totalNumber > 10">
            <el-pagination
              small
              background
              @size-change="receiveSizeChange"
              @current-change="receiveCurrentChange"
              :current-page="receiveParam.pageIndex"
              :page-size="receiveParam.pageSize"
              layout="prev, pager, next"
              :total="receiveParam.totalNumber"
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 借还记录 -->
      <div>
        <div class="table-box-title">
          <span>
            <img src="../../../assets/images/assetManage/return_icon.png" />借还记录
          </span>
        </div>
        <div
          class="zh-table-contents"
          v-loading="loanLoading.status"
          :element-loading-text="loanLoading.txt"
        >
          <el-table :data="loanData" border fixed max-height="600" style="width: 100%">
            <el-table-column
              type="index"
              :index="loanTypeIndex"
              label="序号"
              align="center"
              show-overflow-tooltip
              width="28"
            ></el-table-column>
            <el-table-column
              prop="day_time"
              label="借用时间"
              align="center"
              show-overflow-tooltip
              width="130"
            ></el-table-column>
            <el-table-column prop="num" label="借用数" align="center" show-overflow-tooltip width="46"></el-table-column>
            <el-table-column
              prop="user_name"
              label="借用人"
              align="center"
              show-overflow-tooltip
              width="58"
            ></el-table-column>
            <el-table-column prop label="状态" align="center" show-overflow-tooltip width="56">
              <template slot-scope="scope">
                <span v-if="scope.row.status==1">借用中</span>
                <span v-else-if="scope.row.status==2">已归还</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop label="备注" align="center" show-overflow-tooltip width="28">
              <template slot-scope="scope">
                <span class="check-row" v-if="scope.row.comment" @click="checkRemark(scope.row)">查看</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination" v-show="loanParam.totalNumber > 10">
            <el-pagination
              small
              background
              @size-change="loanSizeChange"
              @current-change="loanCurrentChange"
              :current-page="loanParam.pageIndex"
              :page-size="loanParam.pageSize"
              layout="prev, pager, next"
              :total="loanParam.totalNumber"
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 维修记录 -->
      <div>
        <div class="table-box-title">
          <span>
            <img src="../../../assets/images/assetManage/fixed_icon.png" />维修记录
          </span>
        </div>
        <div
          class="zh-table-contents"
          v-loading="maintainLoading.status"
          :element-loading-text="maintainLoading.txt"
        >
          <el-table :data="maintainData" border fixed max-height="600" style="width: 100%">
            <el-table-column
              type="index"
              :index="maintainTypeIndex"
              label="序号"
              align="center"
              show-overflow-tooltip
              width="28"
            ></el-table-column>
            <el-table-column
              prop="day_time"
              label="报损时间"
              align="center"
              show-overflow-tooltip
              width="130"
            ></el-table-column>
            <el-table-column prop="num" label="维修数" align="center" show-overflow-tooltip width="46"></el-table-column>
            <el-table-column
              prop="user_name"
              label="维修人"
              align="center"
              show-overflow-tooltip
              width="58"
            ></el-table-column>
            <el-table-column prop label="状态" align="center" show-overflow-tooltip width="56">
              <template slot-scope="scope">
                <span v-if="scope.row.status==1">维修中</span>
                <span v-else-if="scope.row.status==2">已修复</span>
                <span v-else-if="scope.row.status==3">已报废</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop label="备注" align="center" show-overflow-tooltip width="28">
              <template slot-scope="scope">
                <span class="check-row" v-if="scope.row.comment" @click="checkRemark(scope.row)">查看</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination" v-show="maintainParam.totalNumber > 10">
            <el-pagination
              small
              background
              @size-change="maintainSizeChange"
              @current-change="maintainCurrentChange"
              :current-page="maintainParam.pageIndex"
              :page-size="maintainParam.pageSize"
              layout="prev, pager, next"
              :total="maintainParam.totalNumber"
            ></el-pagination>
          </div>
        </div>
      </div>
    </section>
    <el-dialog title="备注信息" :visible.sync="remarksVisible" width="550px">
      <span>{{assetRemarks}}</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      assetId: this.$route.query.id, //当前的资产id
      assetInfoData: {}, // 资产信息
      assetPicData: [], //资产图片预览数据
      // 领用记录部分：
      receiveLoading: {
        status: false,
        txt: "获取数据..."
      },
      receiveData: [], // 领用列表
      receiveParam: {
        // 领用参数
        pageIndex: 1,
        pageSize: 10,
        totalNumber: 0
      },
      // 借还记录部分：
      loanLoading: {
        status: false,
        txt: "获取数据..."
      },
      loanData: [], // 借还列表
      loanParam: {
        // 借还参数
        pageIndex: 1,
        pageSize: 10,
        totalNumber: 0
      },
      // 维修记录部分：
      maintainLoading: {
        status: false,
        txt: "获取数据..."
      },
      maintainData: [], // 维修列表
      maintainParam: {
        // 维修参数
        pageIndex: 1,
        pageSize: 10,
        totalNumber: 0
      },
      assetRemarks: "", //备注
      remarksVisible: false //备注弹窗默认关闭
    };
  },
  created() {
    this.getDetail();
    this.receiveList();
    this.loanList();
    this.maintainList();
  },
  mounted() {},
  methods: {
    /**
     * 下载资产二维码
     */
    exportQrCode() {
      let id = this.assetId;
      this.export_excel("api/property/qrcode", { id }, "资产管理二维码", "qr");
    },
    /**
     * 切换资产
     */
    changeAsset(val) {
      let self = this;
      let Id = self.$route.query.id; //当前资产的id
      let assetIdData = JSON.parse(sessionStorage.getItem("idData")); //资产列表所有资产的id集合

      assetIdData.map((item, index) => {
        if (item == Id) {
          let inx = index + val;
          let length = assetIdData.length;
          if (inx < 0) {
            self.$message.warning("已是第一个了");
          } else if (inx > length - 1) {
            self.$message.warning("已是最后一个了");
          } else {
            let params = { id: assetIdData[inx] };
            self.$router.push({ path: "/assetManage/detail", query: params });
          }
        }
      });
    },
    /**
     * 获取资产状态
     * @param {Number} key 资产状态
     */
    getAssetState(key) {
      if (this.assetInfoData.spread) {
        let res = this.assetInfoData.spread.filter(
          item => item.status == key
        )[0];
        return res ? res.number : 0;
      } else {
        return 0;
      }
    },
    /**
     * 获取资产详细信息
     */
    getDetail() {
      let success = res => {
        this.assetInfoData = res.data;
        let src = this.BASE_URL + res.data.thumb;
        this.assetPicData.push(src);
      };
      this.$ajax.get("api/property/single", {
        params: { id: this.assetId },
        func: { success: success }
      });
    },
    /**
     * 获取领用数据
     */
    receiveList() {
      let success = res => {
        this.receiveLoading.status = false;
        this.receiveData = res.data.data;
        this.receiveParam.totalNumber = res.data.data_sum;
      };

      let params = {
        page_index: this.receiveParam.pageIndex,
        page_size: this.receiveParam.pageSize,
        property_id: this.assetId
      };

      this.$ajax.get("api/property/uselists", {
        params: params,
        func: { success: success }
      });
    },
    /**
     * 领用表格序号
     * @param {Number} index  序号
     */
    receiveTypeIndex(index) {
      return (
        index +
        (this.receiveParam.pageIndex - 1) * this.receiveParam.pageSize +
        1
      );
    },
    /**
     * 领用表格每页数量改变
     * @param {Number} val 每页数据条数
     */
    receiveSizeChange(val) {
      this.receiveParam.pageIndex = 1;
      this.receiveParam.pageSize = val;
      this.receiveList();
    },
    /**
     * 领用表格页数改变
     * @param {Number} val 页数
     */
    receiveCurrentChange(val) {
      this.receiveParam.pageIndex = val;
      this.receiveList();
    },
    /**
     * 获取借用数据
     */
    loanList() {
      let success = res => {
        this.loanLoading.status = false;
        this.loanData = res.data.data;
        this.loanParam.totalNumber = res.data.data_sum;
      };

      let params = {
        page_index: this.loanParam.pageIndex,
        page_size: this.loanParam.pageSize,
        property_id: this.assetId
      };

      this.$ajax.get("api/property/borrowlists", {
        params: params,
        func: { success: success }
      });
    },
    /**
     * 借还表格序号
     * @param {Number} index  序号
     */
    loanTypeIndex(index) {
      return (
        index + (this.loanParam.pageIndex - 1) * this.loanParam.pageSize + 1
      );
    },
    /**
     * 借还表格每页数量改变
     * @param {Number} val 每页数据条数
     */
    loanSizeChange(val) {
      this.loanParam.pageIndex = 1;
      this.loanParam.pageSize = val;

      this.receiveList();
    },
    /**
     * 借还表格页数改变
     * @param {Number} val 页数
     */
    loanCurrentChange(val) {
      this.loanParam.pageIndex = val;

      this.receiveList();
    },
    /**
     * 获取维修数据
     */
    maintainList() {
      let success = res => {
        this.maintainLoading.status = false;
        this.maintainData = res.data.data;
        this.maintainParam.totalNumber = res.data.data_sum;
      };

      let params = {
        page_index: this.maintainParam.pageIndex,
        page_size: this.maintainParam.pageSize,
        property_id: this.assetId
      };

      this.$ajax.get("api/property/fixlists", {
        params: params,
        func: { success: success }
      });
    },
    /**
     * 维修表格序号
     * @param {Number} index  序号
     */
    maintainTypeIndex(index) {
      return (
        index +
        (this.maintainParam.pageIndex - 1) * this.maintainParam.pageSize +
        1
      );
    },
    /**
     * 领用表格每页数量改变
     * @param {Number} val 每页数据条数
     */
    maintainSizeChange(val) {
      this.maintainParam.pageIndex = 1;
      this.maintainParam.pageSize = val;
      this.maintainList();
    },
    /**
     * 领用表格页数改变
     * @param {Number} val 页数
     */
    maintainCurrentChange(val) {
      this.maintainParam.pageIndex = val;
      this.maintainList();
    },
    //查看备注的点击事件
    checkRemark(val) {
      this.assetRemarks = val.comment;
      this.remarksVisible = true;
    }
  }
};
</script>
<style lang="scss">
%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-back {
  font-size: 14px;
  a {
    color: #333;
  }
  span {
    i {
      margin: 0 10px;
    }
    color: #999;
  }
}
.asset-base-info {
  padding: 0 40px 30px;
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .asset-title {
    color: #666;
    border-bottom: 1px solid #efefef;
    .fl {
      font-size: 14px;
      line-height: 40px;
    }
    .el-icon-arrow-left,
    .el-icon-arrow-right {
      padding: 8px;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
    .el-icon-arrow-left {
      margin-left: 10px;
    }
  }
}
.top-box-content {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  font-size: 14px;
  > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 330px;
    min-height: 330px;
  }

  > div:last-child {
    flex: 1;
    position: relative;
    margin-left: 20px;
    background: #f4fbff;
    border: 1px solid #f1f6fe;
    .top-box-right {
      padding: 23px 20px 0;
      border-bottom: 1px dashed #dbdfe5;

      > div {
        .list-item {
          display: flex;
          margin-bottom: 12px;
          line-height: 16px;
          > div {
            display: flex;
            width: 50%;

            > span:last-child {
              flex: 1;
              @extend %ellipsis;
            }
          }
        }
      }

      .content-state {
        display: inline-block;
        flex: 1;
        width: inherit;
        color: #ddd;

        span {
          font-size: 14px;
          color: #000;
          text-align: center;
          padding: 3px;
        }

        span:first-child {
          margin-right: 20px;
          background: #d4ffd1;
        }

        span:nth-child(2) {
          margin: 0 20px;
          background: #e5f8ff;
        }

        span:nth-child(3) {
          margin: 0 20px;
          background: #ebe8f7;
        }

        span:nth-child(4) {
          margin: 0 20px;
          background: #eceef3;
        }

        .last-span {
          flex: initial !important;
          margin-left: 20px;
          background: #fff0f0;
        }
      }
      .remarks {
        word-wrap: break-word;
        word-break: break-all;
      }
    }

    .name-title {
      width: 140px;
      color: #666;
    }

    .top-box-bottom {
      padding: 16px 20px;
      color: #666;
      div {
        display: inline-block;
      }
      div:last-child {
        margin-left: 80px;
      }
    }
  }
}

.asset-record {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 40px;

  > div {
    flex: 1;
    width: 0;
  }

  > div:nth-child(2) {
    margin: 0 20px;
  }

  .table-box-title {
    display: flex;
    justify-content: space-between;
    padding: 0 30px 0 20px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #ffffff;
    background: #498cda;
    border-radius: 4px 4px 0px 0px;

    img {
      margin-right: 12px;
      vertical-align: middle;
    }
  }
  .zh-table-contents {
    background-color: #fff;
    padding: 25px 20px;
    .el-table {
      font-size: 12px;
    }
    .el-table .cell,
    .el-table th div {
      padding: 0;
      text-align: center;
    }
    .el-table .cell.el-tooltip {
      min-width: 30px;
    }
  }
  .check-row {
    color: #348efc;
    cursor: pointer;
  }
}
.table-pagination {
  margin-top: 20px;
}
</style>

